<template>
  <div class="page-wrapper">
    <c-card :type="2" title="概况" no-padding class="overview">
      <div class="overview-container">
        <load-data-wrapper :status="loadStatus">
          <div v-if="loadStatus === 'load'" class="overview-content">
            <div class="top">
              <div class="icon-wrapper">
                <div class="icon">
                  <el-image :src="require('@/assets/index/健康指数背景.png')"></el-image>
                  <div class="abs-center">
                    <el-image :src="require('@/assets/index/椭圆 1 拷贝 4.png')" class="circle1"></el-image>
                  </div>
                  <div class="echarts abs-center">
                    <div id="echarts"></div>
                    <div class="tag">{{ info.info.bmi }}</div>
                  </div>
                </div>
                <div class="icon-day">
                  <div>
                    <div style="text-align: center;">
                      <span style="font-size: 2.4vw;">{{ info.info.rundays }}</span>
                      <span style="font-size: 1.6vw">天</span>
                    </div>
                    <div style="font-size: 1vw">安全运行天数</div>
                  </div>
                </div>
              </div>
              <div class="title">
                <vertical-center-row class="line">
                  <el-image :src="require('@/assets/index/公司名称.png')"></el-image>
                  <span class="com-name">{{ info.info.name }}</span>
                </vertical-center-row>
                <vertical-center-row class="line">
                  <el-image :src="require('@/assets/index/地图.png')"></el-image>
                  <span>{{ info.info.address }}</span>
                </vertical-center-row>
              </div>
            </div>
            <div class="bottom">
              <div class="dev-wrapper">
                <title-card title="设备信息">
                  <icon-label-value
                    :icon="require('@/assets/index/配电房.png')"
                    label="配电房数量"
                    :value="info.info.roomcount"
                  ></icon-label-value>
                  <icon-label-value
                    :icon="require('@/assets/index/变压器.png')"
                    label="变压器数量"
                    :value="info.info.transformercount"
                  ></icon-label-value>
                  <icon-label-value
                    :icon="require('@/assets/index/高压柜.png')"
                    label="高压柜数量"
                    :value="info.info.hCabies"
                  ></icon-label-value>
                  <icon-label-value
                    :icon="require('@/assets/index/低压柜.png')"
                    label="低压柜数量"
                    :value="info.info.lCabies"
                  ></icon-label-value>
                </title-card>
                <title-card title="用能信息">
                  <icon-label-value
                    :icon="require('@/assets/index/额定容量.png')"
                    label="额定总容量"
                    :value="info.eng.capacity"
                    unit="KVA"
                  ></icon-label-value>
                  <icon-label-value
                    :icon="require('@/assets/index/设备概览-运行总容量.png')"
                    label="运行总容量"
                    :value="info.eng.runcapacity"
                    unit="KVA"
                  ></icon-label-value>
                  <icon-label-value
                    :icon="require('@/assets/index/今日总电量.png')"
                    label="今日总电量"
                    :value="info.eng.dcountTodayKwh"
                    unit="kWh"
                  ></icon-label-value>
                  <icon-label-value
                    :icon="require('@/assets/index/本月总容量.png')"
                    label="本月总电量"
                    :value="info.eng.mcountmonthKwh"
                    unit="kWh"
                  ></icon-label-value>
                </title-card>
                <title-card col-num="1" title="工单信息">
                  <order-item
                    :total="info.work.rworknums"
                    :finished="info.work.rworkfinish"
                    :percent="info.work.rperfinish"
                  ></order-item>
                </title-card>
              </div>
            </div>
          </div>
        </load-data-wrapper>
      </div>
    </c-card>
    <c-card :type="2" no-padding title="地图" class="map">
      <template v-slot:func>
        <el-dropdown v-if="info" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ dropValue || '全部站点' }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="s in info.stations"
              :key="s.pkid"
              :command="s"
            >{{ s.stationName }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <div id="map-container"></div>
      <transition name="slide-left">
        <keep-alive>
          <side-dlg
            v-if="stationId"
            :client-id="comId || info.info.pkid"
            :station-id="stationId"
            @close="stationId = null"
          ></side-dlg>
        </keep-alive>
      </transition>
    </c-card>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import VerticalCenterRow from "@/components/base/VerticalCenterRow";
import TitleCard from "./components/TitleCard";
import IconLabelValue from "./components/IconLabelValue";
import OrderItem from "./components/OrderItem";
import echarts from "echarts";
import SideDlg from "./components/SideDlg";
import LoadDataWrapper from "../../components/base/LoadDataWrapper";
let map = null;
const BMap = window.BMap;
const addMaker = function(point, img, title) {
  // 创建图标对象
  const myIcon = new BMap.Icon(img, new BMap.Size(25, 30), {
    imageSize: new BMap.Size(25, 30),
    // 指定定位位置。
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
    // 图标中央下端的尖角位置。
    anchor: new BMap.Size(12.5, 30)
    // 设置图片偏移。
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。
    // imageOffset: new BMap.Size(0, -10) // 设置图片偏移
  });
  // 创建标注对象并添加到地图
  const marker = new BMap.Marker(point, { icon: myIcon, title: title });
  return marker;
};

const showInfoWnd = function(opt, p) {
  const tpl = `
    <section>
      <h4 style="margin-top: 0; margin-bottom: 14px;">${opt.stationName}</h4>
      <div style="margin-bottom: 10px;">地址: ${opt.address}</div>
      <div>状态: <span class="map-wnd-tag">${opt.status}</span></div>
    </section>
  `;
  // var opts = {
  //   width: 200, // 信息窗口宽度
  //   height: 100, // 信息窗口高度
  //   title: opt.title // 信息窗口标题
  // };
  var infoWindow = new BMap.InfoWindow(tpl);
  map.openInfoWindow(infoWindow, p);
};
export default {
  name: "Dashboard",
  components: {
    CCard,
    VerticalCenterRow,
    TitleCard,
    IconLabelValue,
    OrderItem,
    SideDlg,
    LoadDataWrapper
  },
  data() {
    return {
      info: null,
      echarts: null,
      dropValue: null,
      stationId: null,
      loadStatus: "loading"
    };
  },
  computed: {
    comId() {
      return this.$store.getters.comId;
    }
  },
  async mounted() {
    this.initMap();
    await this._getData();

    this.markMap();
  },
  methods: {
    _getData() {
      this.loading = true;
      const clientId = this.comId;
      return this.$axios
        .get("/plat/index/viewnew", { params: { clientId } })
        .then(res => {
          if (res.code === 1) {
            this.info = res.data;
            if (!this.info || JSON.stringify(this.info) === "{}") {
              this.loadStatus = "empty";
            } else {
              this.loadStatus = "load";
              this.$nextTick(() => {
                this.echarts = echarts.init(document.getElementById("echarts"));
                this.setOption();
              });
            }
          } else {
            throw res.msg;
          }
        })
        .catch(e => {
          console.log(e);
          this.loadStatus = "error";
        });
    },
    setOption() {
      const calcAng = ang => {
        if (ang > 270) {
          return 180 - (ang - 270);
        }
        return 90 - ang;
      };
      const score = parseInt(this.info.info.score) || 0;
      // if (typeof score !== "number") {
      //   return;
      // }
      const axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: "#FFD67E"
        },
        {
          offset: 1,
          color: "#13D0AF"
        }
      ]);
      const per = score / 100;
      const ang = per * 360;
      // console.log(calcAng(ang));
      const option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        tooltip: {
          show: false
        },
        series: [
          {
            name: "健康综合指数",
            type: "gauge",
            radius: "100%",
            pointer: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 4,
                shadowBlur: 0,
                color: [[1, axislineColor]]
              }
            },
            startAngle: 89.99,
            endAngle: calcAng(ang),
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              formatter(v) {
                if (typeof v !== "number") {
                  return "-分";
                }
                return `${v}分`;
              },
              fontSize: 30,
              offsetCenter: [0, "-30%"],
              color: "#fff"
            },
            title: {
              offsetCenter: [0, "15%"],
              color: "#fff"
            },
            data: [{ value: score, name: "健康综合指数" }]
          }
        ]
      };
      this.echarts.setOption(option);
    },
    handleCommand(s) {
      this.dropValue = s.stationName;
      this.stationId = s.pkid;
      const p = s.location.split(",");
      if (p.length !== 2) return;
      const point = new BMap.Point(p[0], p[1]);
      showInfoWnd(s, point);
    },
    initMap() {
      const p = [106.504108, 29.598395];
      map = new BMap.Map("map-container");
      const point = new BMap.Point(p[0], p[1]);
      map.centerAndZoom(point, 13);
      map.setCurrentCity("重庆");
      map.enableScrollWheelZoom(true);
    },
    markMap() {
      const stations = this.info.stations;
      if (stations instanceof Array) {
        stations.forEach((s, i) => {
          const p = s.location.split(",");
          if (p.length !== 2) return;
          const point = new BMap.Point(p[0], p[1]);
          let marker;
          if (s.status === "好" || s.status === "良好") {
            marker = addMaker(
              point,
              require("../../assets/index/运行状态良好图标.png"),
              s.stationName
            );
          } else {
            marker = addMaker(
              point,
              require("../../assets/index/运行状态异常图标.png"),
              s.stationName
            );
          }
          map.addOverlay(marker);
          if (i === 0) {
            map.centerAndZoom(point, 13);
          }
          marker.addEventListener("click", () => {
            this.stationId = s.pkid;
            showInfoWnd(s, point);
          });
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@keyframes circlerotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.slide-left-enter,
.slide-left-leave-to {
  transform: translateX(100%);
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.5s;
}

.page-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 8fr;
  grid-column-gap: 12px;
  grid-template-rows: 1fr;
  height: calc(100% - 40px);
  color: #4d576c;
  .com-card {
    height: 100%;
    overflow: hidden;
  }
  .overview {
    .overview-container {
      flex: 1;
      overflow: auto;
      // display: flex;
      // flex-direction: column;
      >>> .overview-content {
        padding: 16px;
      }
    }
    .icon-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        position: relative;
        width: 11vw;
        height: 11vw;
        flex-shrink: 0;
        overflow: hidden;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          // border: 8px solid #fff;
          background: #fff;
          // box-sizing: border-box;
        }
        .abs-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 100%;
          width: 100%;
        }
        .circle1 {
          width: 100%;
          height: 100%;
          background: transparent;
          border-radius: 50%;
          animation: circlerotate 5s infinite;
        }
        .echarts {
          width: 60%;
          height: 60%;
          overflow: hidden;
          #echarts {
            width: 100%;
            height: 100%;
          }
          .tag {
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            height: 24px;
            padding: 0 14px;
            border-radius: 12px;
            color: #fff;
            font-size: 12px;
            line-height: 24px;

            background: linear-gradient(
              90deg,
              rgba(47, 157, 205, 1),
              rgba(49, 117, 233, 1),
              rgba(87, 190, 234, 1)
            );
          }
        }
      }

      .icon-day {
        height: 5vw;
        padding: 10px 1vw;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #97c1fc;
        color: #fff;
        margin-left: -1vw;
        border-top-right-radius: 2.5vw;
        border-bottom-right-radius: 2.5vw;
        white-space: nowrap;
      }
    }
    .title {
      text-align: left;
      padding: 6px 0 6px 0;
      border-bottom: 1px solid #e6eaee;
    }
    .line {
      margin: 4px 0;
      .com-name {
        font-size: 20px;
        font-weight: bold;
      }
      span {
        margin-left: 10px !important;
      }
    }
  }
  .map {
    .el-dropdown {
      color: #fff;
      cursor: pointer;
    }
    #map-container {
      flex: 1;
    }
  }
}
</style>

<style lang="scss">
.BMap_pop {
  opacity: 0.8;
  .BMap_bubble_content {
    background: transparent;
    // max-width: 200px;
    .map-wnd-tag {
      display: inline-block;
      width: 60px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: rgba(43, 159, 246, 1);
      box-shadow: 0px -3px 8px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }
  }
}
.el-dropdown-menu--medium {
  max-height: 500px;
  overflow-y: auto;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 3px;
    height: 2px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #c8c8c8;
  }
</style>
